<%--
  Created by IntelliJ IDEA.
  User: CM
  Date: 17/6/2
  Time: 上午12:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>社区版块配置</title>
    <jsp:include page="../../common/header.jsp"></jsp:include>
    <jsp:include page="../../common/cloud-head.jsp"></jsp:include>
    <jsp:include page="../../common/dt.jsp"></jsp:include>
    <style>
        .card.section-item {
            display: inline-block;
            vertical-align: top;
            margin: 1rem 2rem;
            width: 20rem;
            height: auto;
            overflow: hidden;
        }

        .card.section-item img {
            display: block;
            height: 20rem;
            width: 20rem;
            box-shadow: 0 0 3px #bd6ae4;
        }

        .card.section-item .desc h3 {
            font-size: 18px;
            font-weight: bold;
            text-indent: 1rem;
        }

        .card.section-item .desc .switch {
            display: inline-block;
        }

        .card.section-item .desc .switch::before {
            content: '版块状态:';
            margin-left: 1rem;
        }

        .card.section-item {
            display: inline-block;
            margin: 0 auto;
            vertical-align: top;
            height: 28rem;
            box-shadow: none;
        }

        .section-pay {
            display: inline-block;
            vertical-align: top;
            width: 28rem;
            height: 28rem;
            border-left: 1px solid #ddd;
        }

        .section-pay-item {
            display: inline-block;
            width: 49rem;
            margin: 1rem;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)

            /* box-shadow: 1px 1px 3px #ccc; */
        }

        .section-pay > div .switch {
            display: inline-block;
        }

        .section-pay > div:first-child {
            padding: .4rem;
        }

        .section-pay > div:first-child:before {
            content: '版块推广';
            display: inline-block;
        }

        .section-pay > div:last-child {
            border-top: 1px solid #ddd;
            padding: .4rem;
            margin-top: 0.9rem;
        }

        .section-pay > div:last-child:before {
            content: '列表置顶';
            display: inline-block;
        }

        .pay-resolve-box > div {
            line-height: 2rem;
            display: inline-block;
            margin: .2rem .05rem;
        }

        .pay-resolve-box > div input {
            display: inline-block;
            vertical-align: top;
            width: 6rem;
            line-height: 2rem;
            height: 1.4rem;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="col-md-12">
    <div class="card">
        <div class="card-action">
            <label>版块配置</label>
            <button class="btn btn-primary" data-toggle="modal" data-target="addDialog"
                    onclick="$('#addDialog').modal('show')">添加版块
            </button>
            <div class="alert alert-info" style="margin-top:1rem;">
                <strong>操作提示:</strong>
                <br>
                1.版块图片的选择请保持正方向比例
                <br>
                2.版块的禁用不会删除已经存在的资讯，但会隐藏入口（内衣展销会、辅助料配件、内衣裤、综合社区等几个固定版块除外）
            </div>
        </div>
        <div class="card-content">
            <%--<table class="autoTable" id="mainTable">--%>
            <%--<thead>--%>
            <%--<tr>--%>
            <%--<th>版块名称</th>--%>
            <%--<td>版块LOGO</td>--%>
            <%--<td>是否启用</td>--%>
            <%--<td>操作</td>--%>
            <%--</tr>--%>
            <%--</thead>--%>
            <%--</table>--%>
            <div id="section-list-box"></div>
        </div>
    </div>
</div>


<div class="modal fade" id="addDialog" tabindex="-1" role="dialog" aria-labelledby="sectionLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="sectionLabel">
                    添加版块
                </h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label>版块名称</label>
                            <input type="text" value="" placeholder="请输入版块名称" name="sectionName" id="sectionName"/>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>版块LOGO</label>
                            <img id="img-preview" name="img-preview" class="img_upload_preview"
                                 for="img-file" data-target="img-val" src=""
                                 onclick="$('#img-file').click()"
                                 onerror="this.src='${ctx}/resources/ueditor/dialogs/image/images/image.png'"/>
                            <input id="img-file" type="file" name="img-file" style="display: none;"
                                   onchange="uploadFile('img-file','img-preview','sectionImage','image')"/>
                            <input name="sectionImage" id="sectionImage" type="hidden">
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-primary" onclick="addSection()">
                    提交
                </button>
            </div>
        </div>
    </div>

</div>
<jsp:include page="../shop/content/common-tmpl.jsp"></jsp:include>
<script src="${ctx}/resources/script/common.js" type="text/javascript"></script>


<script type="text/html" id="sectionTmpl">
    <div class="section-pay-item" data-id="\${id}">
        <div class="card section-item">
            <img src="\${sectionImage}" class="edit_able" data-name="sectionImage" data-type="img" title="点击修改版块封面"
                 data-id="\${id}"/>
            <div class="desc">
                <h3 class="edit_able" data-name="sectionName" data-type="text" data-id="\${id}">
                    \${sectionName}
                    <i class="fa fa-edit" style="margin:0 0.4rem;color:#0aa;display:inline-block;cursor:pointer;"
                       title="点击修改标题"></i>
                </h3>
                {{if status=="1"}}
                <div class="switch" onclick="">
                    <label>
                        <input checked type="checkbox" onchange="updateSection(\${id},'status',0)">
                        <span class="lever"></span>
                        已启用
                    </label>
                </div>
                {{else}}
                <div class="switch" onclick="">
                    <label>
                        <input type="checkbox" onchange="updateSection(\${id},'status',1)">
                        <span class="lever"></span>
                        已禁用
                    </label>
                </div>
                {{/if}}
            </div>
        </div>
        <div class="section-pay">
            <div>
                {{if payForBanner}}
                <div class="switch" onclick="">
                    <label>
                        <input checked type="checkbox" onchange="updateSection(\${id},'payForBanner',0)">
                        <span class="lever"></span>
                        已启用
                    </label>
                </div>
                {{else}}
                <div class="switch" >
                    <label>
                        <input type="checkbox" onchange="updateSection(\${id},'payForBanner',1)">
                        <span class="lever"></span>
                        已禁用
                    </label>
                </div>
                {{/if}}

                <div class="pay-resolve-box pay-for-banner" data-id="\${id}">
                    <div><label>一周</label><input type="number" name="oneWeek"
                                                 value="\${payForBannerResolve.oneWeek || 10}"/></div>
                    <div><label>一月</label><input type="number" name="oneMonth"
                                                 value="\${payForBannerResolve.oneMonth || 35}"/></div>
                    <div><label>三月</label><input type="number" name="threeMonth"
                                                 value="\${payForBannerResolve.threeMonth || 100}"/></div>
                    <div><label>六月</label><input type="number" name="halfYear"
                                                 value="\${payForBannerResolve.halfYear || 200}"/></div>
                    <div><label>一年</label><input type="number" name="year"
                                                 value="\${payForBannerResolve.year || 400}"/></div>
                    <button class="btn btn-primary"
                            onclick="updateSectionPayResolve(\${id},\${payForBannerResolve.id},'payForBanner')">保存
                    </button>
                </div>
            </div>
            <div>
                {{if payForTop}}
                <div class="switch">
                    <label>
                        <input checked type="checkbox" onchange="updateSection(\${id},'payForTop',0)">
                        <span class="lever"></span>
                        已启用
                    </label>
                </div>
                {{else}}
                <div class="switch">
                    <label>
                        <input type="checkbox" onchange="updateSection(\${id},'payForTop',1)">
                        <span class="lever"></span>
                        已禁用
                    </label>
                </div>
                {{/if}}

                <div class="pay-resolve-box pay-for-top">
                    <div><label>一周</label><input type="number" name="oneWeek"
                                                 value="\${payForTopResolve.oneWeek|| 10}"/></div>
                    <div><label>一月</label><input type="number" name="oneMonth"
                                                 value="\${payForTopResolve.oneMonth|| 35}"/></div>
                    <div><label>三月</label><input type="number" name="threeMonth"
                                                 value="\${payForTopResolve.threeMonth|| 100}"/></div>
                    <div><label>六月</label><input type="number" name="halfYear"
                                                 value="\${payForTopResolve.halfYear|| 200}"/></div>
                    <div><label>一年</label><input type="number" name="year" value="\${payForTopResolve.year|| 400}"/>
                    </div>
                    <button class="btn btn-primary"
                            onclick="updateSectionPayResolve(\${id},\${payForTopResolve.id},'payForTop')">保存
                    </button>

                </div>
            </div>
        </div>
    </div>
</script>
<script>
    $(function () {
        loadSection();
    })

    function updateSectionPayResolve(sectionId, id, type) {
        var param = {};
        switch (type) {
            case 'payForTop':
                var inputs = $(".section-pay-item[data-id=\"" + sectionId + "\"]").find('.pay-for-top input');
                for (var i = 0; i < inputs.length; i++) {
                    var e = inputs[i];
                    var name = $(e).attr("name");
                    var price = parseFloat($(e).val())
                    param[name] = price;
                    try {
                        if (parseFloat($(e).val()) < 0) {
                            bootbox.alert("收费价格仅允许输入大于0的数字，请检查要保存的付费方案！");
                            return -1;
                        }
                    } catch (e) {
                        if (parseFloat($(e).val()) < 0) {
                            bootbox.alert("收费价格仅允许输入大于0的数字，请检查要保存的付费方案！");
                            return -1;
                        }
                    }
                }


                break;
            case 'payForBanner':
                var inputs = $(".section-pay-item[data-id=\"" + sectionId + "\"]").find('.pay-for-banner input')
                for (var i = 0; i < inputs.length; i++) {
                    var e = inputs[i];
                    var name = $(e).attr("name");
                    var price = parseFloat($(e).val())
                    param[name] = price;
                    try {
                        if (parseFloat($(e).val()) < 0) {
                            bootbox.alert("收费价格仅允许输入大于0的数字，请检查要保存的付费方案！");
                            return -1;
                        }
                    } catch (e) {
                        if (parseFloat($(e).val()) < 0) {
                            bootbox.alert("收费价格仅允许输入大于0的数字，请检查要保存的付费方案！");
                            return -1;
                        }
                    }
                }
                break;
        }
        param["id"] = id;

        asyncAjax({
            url: '${ctx}/sectionMgr/section/resolve/update',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify(param),
            success: function (res) {
                if (res["result"] == "0") {
                    bootbox.alert("修改成功");
                    loadSection();
                } else {
                    bootbox.alert(res["msg"]);
                }
            }
        })
    }

    function updateSection(id, key, val) {
        var data = CURRENT_DATA_CACHE[id];
        delete data["payForTopResolve"];
        delete data["payForBannerResolve"];
        data[key] = val;
        if (isEmpty(key) || isEmpty(val)) {
            bootbox.alert("参数缺失！");
            return;
        }
        asyncAjax({
            url: ctx + "/sectionMgr/mergeSection",
            data: data,
            success: function (res) {
                //console.log("res:%o", res);
                if (res["result"] == "0") {
                    bootbox.alert("修改成功");
                    loadSection();
                } else {
                    bootbox.alert(res["msg"]);
                }
            }
        })
    }

    function addSection() {
        var data = {
            sectionName: $("#sectionName").val() || "",
            sectionImage: $("#sectionImage").val() || ""
        }
        if (isEmpty(data["sectionImage"])) {
            bootbox.alert("请上传版块LOGO!");
            return;
        }
        asyncAjax({
            url: ctx + "/sectionMgr/addSection",
            data: data,
            success: function (res) {
                //console.log("res:%o", res);
                if (res["result"] == "0") {
                    bootbox.alert("添加成功");
                    var section = res["data"];
                    CURRENT_DATA_CACHE[section.id] = section;
                    $("#sectionTmpl").tmpl(section).appendTo($('#section-list-box'));
                    drawCallBack();
//                    dt.fnAddData([[section.sectionName, section.sectionImage, section.status, section.id]]);
                    $("#addDialog").modal("hide");
                } else {
                    bootbox.alert(res["msg"]);
                }
            }
        })
    }

    var CURRENT_DATA_CACHE = {};

    function loadSection() {
        var data = {};
        asyncAjax({
            url: ctx + "/sectionMgr/list?" + $.param(data).replace(/(%5D|%5B)/g, ""),
            beforeSend: function () {
//                dt.fnClearTable();
                CURRENT_DATA_CACHE = {};
            },
            success: function (res) {
                //console.log("res:%o", res);
                if (res["result"] == "0") {
                    if (!isEmpty(res["data"])) {
                        var datas = [];


                        $.each(res["data"], function (idx, section) {
                            CURRENT_DATA_CACHE[section.id] = section;
                            datas.push([section.sectionName, section.sectionImage, section.status, section.id]);
                        })
                        $('#section-list-box').html("");
                        $("#sectionTmpl").tmpl(res["data"]).appendTo($('#section-list-box'));
                        drawCallBack();
                        //console.log("show datas:%o", datas);
//                        dt.fnAddData(datas);
                    }

                } else {
                    bootbox.alert(res["msg"]);
                }
            }
        })
    }


    var drawCallBack = function () {
        $(".edit_able").clickEditVal(function (data, el) {
            updateSection(parseInt(data["id"]), data["name"], data["value"]);
        });
    }
</script>
</body>
</html>
